<template>
  <Card class="search-form">
    <i-form
        ref="queryFormRef"
        :model="queryForm"
        :label-width="100"
        label-position="right"
        :inline="true"
        class="menu-form">
      <FormItem label="管理员账号" prop="username">
        <Input v-model="queryForm.username"/>
      </FormItem>
      <FormItem label="管理员名称" prop="nickname">
        <Input v-model="queryForm.nickname"/>
      </FormItem>
      <br/>
      <FormItem label="管理员角色" prop="role_id">
        <Select v-model="queryForm.role_id">
          <Option v-for="item in roleData" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <Space wrap class="btn-group">
        <Button type="primary" @click="getAdminLists" v-preventReClick v-perms="['admin/lists']">查询</Button>
        <Button type="default" @click="resetQueryForm" v-preventReClick>重置</Button>
      </Space>
    </i-form>
  </Card>
  <Card>
    <vxe-toolbar>
      <template #buttons>
        <div class="btn-group">
          <Button type="primary" icon="md-add" @click="handleAdd" v-preventReClick v-perms="['admin/add']">新增</Button>
        </div>
      </template>
    </vxe-toolbar>

    <vxe-table
        style="margin-top: 20px"
        align="center"
        border
        :column-config="{resize:true}"
        :data="tableAdminData">
      <vxe-column field="id" title="ID" width="60"/>
      <vxe-column field="username" title="账号" width="100"/>
      <vxe-column field="nickname" title="名称" width="100"/>
      <vxe-column title="角色" show-overflow>
        <template #default="{row}">
          <span v-if="row.root==1">超级管理员</span>
          <span v-else>
            {{ formatterSex(row.group.role_id) }}
          </span>
        </template>
      </vxe-column>
      <vxe-column field="create_time" title="创建时间" width="180"/>
      <vxe-column field="login_time" title="最近登录时间" width="180"/>
      <vxe-column field="login_ip" title="最近登录IP"/>
      <vxe-column title="操作" width="200">
        <template #default="{row}">
          <Tag color="#2db7f5" size="medium" style="cursor:pointer;" @click="handleEdit(row)" v-preventReClick
               v-perms="['admin/edit']">
            编辑
          </Tag>
          <Tag color="error" size="medium" style="cursor:pointer;" v-if="row.root!==1" @click="handleDel(row)"
               v-preventReClick v-perms="['admin/del']">删除
          </Tag>
        </template>
      </vxe-column>
    </vxe-table>

    <Modal
        v-model="adminEditShow"
        :title="modalTitle"
        :footer-hide="true"
        width="70%">
      <AdminEdit ref="adminEditRef" v-if="adminEditShow" :role-data="roleData"></AdminEdit>
      <div slot="footer" style="display: flex;justify-content:right;margin-top: -10px" class="btn-group">
        <Button type="default" @click="cancel" v-preventReClick>取消</Button>
        <Button type="primary" @click="addAdmin" v-preventReClick>确定</Button>
      </div>
    </Modal>
  </Card>
</template>

<script setup>

import {computed, getCurrentInstance, inject, nextTick, onMounted, reactive, ref} from "vue";
import {AdminService} from "@/api/admin";
import {RoleService} from "@/api/role";
import AdminEdit from "@/components/permission/admin";

import {Select, Option} from "view-ui-plus";

const tableAdminData = ref([]);

const roleData = ref([]);

const {proxy} = getCurrentInstance();

const reload = inject('reload');

const adminEditShow = ref(false);

const queryForm = reactive({
  username: '',
  nickname: '',
  role_id: ''
})

const modalTitle = ref('添加管理员');

const getAdminLists = async () => {
  const param = {
    where: queryForm
  };
  const {data} = await AdminService.GetAdminList(param);
  if (data.code === 200) {
    tableAdminData.value = data.data
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        reload();
      }
    })
  }
}

const getRoleLists = async () => {
  const {data} = await RoleService.GetRoleList();
  if (data.code === 200) {
    roleData.value = data.data
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        reload();
      }
    })
  }
}

const resetQueryForm = () => {
  proxy.$refs['queryFormRef'].resetFields();
  getAdminLists();
}

const handleAdd = async () => {
  adminEditShow.value = true
  await nextTick();
  proxy.$refs.adminEditRef.mode = 'add';
}

const handleEdit = async (e) => {
  adminEditShow.value = true;
  modalTitle.value = '编辑管理员信息'
  await nextTick();
  proxy.$refs.adminEditRef.mode = 'edit';
  await proxy.$refs.adminEditRef.getDetail(e);
}

const handleDel = (e) => {
  let param = {id: e.id};
  proxy.$Modal.confirm({
    title: '删除操作确认',
    content: '<p>确定执行删除操作?执行成功后数据将不可恢复。</p>',
    onOk: () => {
      postDel(param);
    },
    onCancel: () => {
      return;
    }
  })
}

const postDel = async (param) => {
  const {data} = await AdminService.DelAdmin(param);
  if (data.code === 200) {
    proxy.$Message.success({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        window.location.reload();
      }
    })
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject();
      }
    })
  }
}

const addAdmin = () => {
  proxy.$refs.adminEditRef.addAdminData();
}

const cancel = () => {
  adminEditShow.value = false;
}

// 计算表格角色对应名称
const formatterSex = (row) => {
  console.log(row)
  const item = roleData.value.find(e => e.id === row);
  return item ? item.name : '';
}

onMounted(() => {
  getRoleLists();
  getAdminLists();
})


</script>

<style scoped lang="less">
@import "./admin.less";
</style>
